<template>
  <div class="hello">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <!--轮播图-->
       <div class="images">
          <!-- <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image.carouselUrl" />
            </van-swipe-item>
          </van-swipe> -->
        </div> 
        <!-- <img src="../assets/logo.png" alt="">  -->
        <div class="content">
          <div v-for="(v, index) in list" :key="index" class="item">
            <img :src="v.avaUrl" alt="" @click="detail(v.id)" />
            <!-- <p>{{v.pname}}</p>
        <p>{{v.price}}</p>  -->
            <p>{{ v.name }}</p>
            <p>{{ v.phone }}</p>
            <button @click="add(v)">购物车</button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { List } from "vant";
import url from '../tools/url'
export default {
  name: "ShouYe",
  data() {
    return {
      list: [],
      finished: false,
      loading: false,
      pageNo: 1,
      isLoading: false,
      images:[]
    };
  },
  methods: {
    add(v) {
      this.$store.commit("addp", v);
    },
    detail(v) {
      this.$router.push({
        path: "/detail",
        query: {
          id: v,
        },
      });
    },
    //下拉刷新
    onRefresh() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios
        .post("https://bufferc.store:8443/user/getUserList", str)
        .then((res) => {
          if (res.data.code == 200) {
            this.isLoading = false;
            res.data.data.list.forEach((item, index, arr) => {
              item.count = 1;
              item.ischeck = false;
              item.price = 1000;
            });
            this.list = res.data.data.list.concat(this.list);
            this.pageNo++;
          }
        });
    },
    //加载新数据
    onLoad() {
      console.log("加载数据");
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios
        .post("https://bufferc.store:8443/user/getUserList", str)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            // 加载状态结束
            this.loading = false;

            res.data.data.list.forEach((item, index, arr) => {
              item.count = 1;
              item.ischeck = false;
              item.price = 1000;
            });
            this.list = this.list.concat(res.data.data.list);
            if (res.data.data.isLastPage) {
              this.finished = true;
            }
            this.pageNo++;
          } else {
            this.$router.push("/logins");
          }
        });
    },
    add(v) {
      this.$store.commit("addp",v);
    },
    detail(v){
      console.log(v);
      this.$router.push({
        path:"/detail",
        query:{
          id:v,
        },
      });
    },
  },

  mounted() {
    var token = sessionStorage.getItem("token");
    this.axios.post(url.images,`token=${token}`).then(res=>{
        console.log(res)
        if(res.data.code==200){
          this.images = res.data.data
        }else{
          this.$router.push("/login")
        }
        
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.images {
  margin-top: 40px;
}
.item {
  width: 45%;
  border: 1px solid black;
}
.item img {
  width: 100%;
}
h2 {
  padding-top: 50px;
  padding-left: 45%;
}
.hellow {
  margin-bottom: 60%;
}
.images img{
  width: 100%;
}
</style>